使用 Hexo 在 Github 上搭建个人博客

发表于 | 分类于 |

准备工作

Node.js

官网下载地址：https://nodejs.org/en/ 傻瓜式安装过程【略】

Github

申请账号

Github 官网：https://github.com/ 注册账号【略】

新建博客仓库

New repository –> 仓库名的格式必须为：用户名.github.io –> 进入仓库后，点击 settings –> 在Options 菜单栏中找到 GitHub Pages 选项

GitHub Pages-1

部分教程中，这个选项中有 Launch automatic page generator 按钮，此时直接点击就可以了。

但在我的 Github Page 页面中并没有这个选项，只有 Choose a theme 按钮，点进去会让你选择主题，同样也可以生成 Github Page，但此时是基于 Jekyll 框架的。

GitHub Pages-2

Git

下载安装

官网下载地址：https://git-scm.com/download/

配置环境变量

右击计算机 –> 属性 –> 高级系统设置 –> 环境变量

在系统变量中找到 path 变量，加入 Git 的两个路径：

D:\Program Files\Git\bin

D:\Program Files\Git\libexec\git-core

注意不同环境变量中不同路径要加分号（英文半角），libexec 文件夹不一定就在 Git 目录下，Git2.0 以上版本的在 Git 目录下的 mingw32 文件夹中。

Git环境变量

关联 Github 账号

随处右击进入 GitBash，输入命令行：

1
2
git config --global user.name "用户名"
git config --global user.email "邮箱地址"

SSH Keys

接着上一步，输入命令行：

1
ssh-keygen -t rsa -C "邮箱地址"

连续回车，生成两个文件 id_rsa 和 id_rsa.pub，打开 id_rsa.pub 复制所有内容。

登录网页版 Github，点击头像 –> Settings –> SSH and GPG keys –> 点击 New SSH key 按钮 –> Title随意，将刚刚复制的内容粘贴到 Key 中 –> Add SSH Key 结束。

SSH Keys配置

安装 Hexo

进入 Node.js 的安装路径，新建一个文件夹（我这里取名为 blog），进入 blog 文件夹，打开命令行窗口（按住 Shift 键，鼠标右键，选择在此处打开命令窗口），依次输入命令：

安装 Hexo：

1
npm install -g hexo

初始化：

1
hexo init

生成静态界面：

1
hexo g

启动本地服务，进行文章预览调试

1
hexo s

此时在浏览器中输入 http://localhost:4000 可以看到这样的页面：

localhost页面

打开 D:\Program Files\nodejs\blog\source_posts 就可以看到一个 hello-world.md 的文件，这就是网站上显示的文章，之后写的博客都是以 md 格式存在这个文件夹中。

配置 Github

打开 nodejs\blog 文件夹下的 _config.yml 文件，拉到最下面，修改为：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/用户名/用户名.github.io.git
  branch: master

然后执行命令：

1
npm install hexo-deployer-git --save

继续执行配置命令：

1
hexo d

完成上述步骤之后，在浏览器中输入 http://用户名.github.io 就可以了。

部署步骤

每次部署的步骤，可以按以下三步进行：

1
2
3
4
5
hexo clean
hexo generate  // hexo g
hexo deploy  // hexo d

更换 Hexo 主题

我使用的主题是：https://github.com/iissnan/hexo-theme-next

打开主题所在文件夹 nodejs\blog\themes，打开 GitBsh 或者命令行，输入下载主题命令:

1
git clone https://github.com/iissnan/hexo-theme-next.git

再执行命令（没有执行如下命令会报错）

1
2
npm install hexo-renderer-jade --save
npm install hexo-renderer-sass --save

下载完成后，会看到 themes 下多了一个文件夹，修改文件名为 next，修改 nodejs\blog 文件夹下的 _config.yml 文件，将 theme 值修改为：next，注意 theme 冒号后的空格要保留。

再次执行命令:

1
2
hexo g
hexo d

就可以看到主题更换成功了。

报错信息处理

报错 spawn git ENOENT

在配置 Github 中最后输入 hexo d 后报错 spawn git ENOENT

解决方法： 添加 Git 环境变量，还不行的话将 Git 版本退回到 2.0 以下。

报错 not a git repository

解决了上一个报错之后，出现 not a git repository 报错信息

解决方法： 删除 nodejs\blog 文件夹下的 .deploy_git 文件夹并且执行 hexo clean 后，重新 hexo g 和 hexo d。

报错 Cannot find module ‘hexo-util’

更换完主题之后，再次执行 hexo clean 时报错，报错信息：

hexo报错

解决方法： 重新安装 hexo-util 模块即可，在 \nodejs\blog 下输入命令：

1
npm install -- save-dev hexo-util

关于 Hexo 的更多设置

添加评论系统

我使用的评论系统是：disqus。

注册账号

disqus 官网地址：https://disqus.com

添加网址

在设置过程中会需要填你的网站地址，填入 https://用户名.github.io 即可

找到 short_name

由于在最初设置的时候没注意 Choose your unique Disqus URL 这一栏填的是什么，其实这一栏中的内容就是你的 short_name，在你的用户界面点击 Settings 菜单栏。
评论系统中的short_name

修改文件

打开根目录（nodejs\blog）下的 _config.yml 文件，在最后面添加：

1
disqus_shortname: your_disqus_short_name

再打开 nodejs\blog\themes\next，找到 _config.yml 文件，找到如下代码修改完即可：

评论系统-修改文件

首页文章只显示预览

修改文件目录：nodejs\blog\themes\next，找到 _config.yml 文件，找到如下代码：

文章只显示预览

将 false 修改为 true 即可。

Fork me on GitHub